<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--移动端的预览设置，用于适配移动端-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="/Semantic-UI-CSS-master/semantic.min.css">
    <link rel="stylesheet" href="/css/myblog.css">
    <title>关于我</title>
</head>
<body>
<!--导航-->
<div th:replace="~{index::indexNav}"></div>

<!--中间内容-->
<div class=" m-padded-tb-big">
    <div class="ui container">
        <div class="ui grid rounded mobile stackable">
            <div class="eleven wide column ">
                <div class="ui segment">
                    <img th:src="@{/images/icon.jpg}" alt="" class="ui rounded image">
                </div>
            </div>
            <div class="five wide column rounded">
                <div class="ui top attached segment">
                    <div class="ui header teal">关于我</div>
                </div>
                <div class="ui attached segment">
                    <p class="m-text-heavy">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在读大学生，自我介绍</p>
                    <p class="m-text-heavy">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有人问我为什么这么早开始学java，答案其实很简单——我不想让自己的大学生活荒废，我想在大学留下一段美好热血的回忆。</p>
                </div>
                <div class="ui attached segment ">
                    <div class="ui orange basic label left pointing">编程</div>
                    <div class="ui orange basic label left pointing">思考</div>
                    <div class="ui orange basic label left pointing">分享</div>
                    <div class="ui orange basic label left pointing">健身</div>
                    <div class="ui orange basic label left pointing">追梦</div>
                </div>
                <div class="ui attached segment">
                    <div class="ui teal basic label left pointing">Java</div>
                    <div class="ui teal basic label left pointing">SSM</div>
                    <div class="ui teal basic label left pointing">后端开发</div>
                    <div class="ui teal basic label left pointing">架构设计</div>
                </div>
                <div class="ui bottom attached segment center aligned ">
                    <a href="https://github.com/BestDreamChaser" class="ui circular icon button m-margin-lr-small">
                        <i class="ui github icon"></i>
                    </a>
                    <a href="#" id="qq" class="ui circular icon button m-margin-lr-small">
                        <i class="ui qq icon"></i>
                    </a>
                    <a href="#" id="wechat" class="ui circular icon button m-margin-lr-small">
                        <i class="ui wechat icon"></i>
                    </a>

                </div>
                <div id="wechat-qr" class="ui flowing popup transition hidden">
                    <img th:src="@{/images/qr.png}" alt="" class="ui rounded image" style="width: 110px">
                </div>
                <div id="qq-qr" class="ui flowing popup transition hidden">
                    <img th:src="@{/images/qr.png}" alt="" class="ui rounded image" style="width: 110px">
                </div>
                <!--二维码-->
                <div class="ui horizontal divider header">扫码关注我</div>
                <div class="ui card centered" style="width: 11em">
                    <img th:src="@{/images/qr.png}" alt="" class="ui rounded image">
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<br>
<!--底部footer-->
<div th:replace="~{index::footer}"></div>


<script src="/js/jquery-3.5.1.min.js"></script>
<script src="/Semantic-UI-CSS-master/semantic.min.js"></script>
<script>

    $("#b1").click(function () {
        $(".m-item").toggleClass("m-mobile-hide");
    });

    $('#wechat').popup({
        popup: $('#wechat-qr'),
        on: 'click',
        position: 'bottom center'
    })
    $('#qq').popup({
        popup: $('#qq-qr'),
        on: 'click',
        position: 'bottom center'
    })
</script>
</body>
</html>